define('pc/js/mod/ucenter/vue-account-nick', [
    'utils/fetchEnhancer'], (fetch) => {

const VueAccountNick = {
    props: ['strUid'],
    data: function() {
        return {
            nickName: '',
            nickTip: ''
        }
    },
    methods: {
        fetchData: function() {
            fetch('/api/account/getloginuser').then((res) => {
                if(0 === res.status) {
                    this.nickName = res.data.data.user_name;
                }
            });
        },
        doEdit: function(e) {
            let btn = e.target;
            let nick = this.nickName;

            if(!nick || '' !== this.nickTip) {
                XUI.toast.error('昵称错误');
                return;
            }

            btn.disabled = true;
            fetch('/api/account/editnick', {
                method: 'POST',
                body: 'nick=' + encodeURIComponent(nick)
            }).then((res) => {
                btn.disabled = false;

                if(0 === res.status) {
                    XUI.toast.success('修改成功');
                } else if(100005 === res.status) {
                    XUI.toast.error('昵称已存在');
                } else {
                    XUI.toast.error('修改失败 ' + res.status);
                }
            });
        },
        checkNick: function(e) {
            let that = this;
            let v = e.target.value;

            if(!v) {
                return;
            }

            clearTimeout(this.inputTimer);
            this.inputTimer = setTimeout(() => {
                fetch('/api/account/nickexist', {
                    method: 'POST',
                    body: 'nick=' + encodeURIComponent(v)

                }).then((json) => {
                    if(0 !== json.status) {
                        that.nickTip = '该昵称已被注册';
                    } else {
                        that.nickTip = '';
                    }
                });
            }, 1000);
        }
    },
    created: function() {
        this.inputTimer = 0;
    },
    mounted: function() {
        this.fetchData();
    },
    template:
`<div>
    <h2 class="uc-itemtitle">我的昵称</h2>
    <div class="uc-content-wrapper">
        <div class="uc-form-item">
            <label class="uc-form-label">昵称</label>
            <div class="uc-form-control">
                <input v-model="nickName" v-on:input="checkNick" type="text" class="x-input">
                <div style="color: #ff6fa2">{{ nickTip }}</div>
            </div>
        </div>
        <div class="uc-form-item">
            <label class="uc-form-label">&nbsp;</label>
            <div class="uc-form-control">
                <button v-on:click="doEdit" type="button" class="x-btn">保存</button>
            </div>
        </div>
    </div>
</div>`
};

return VueAccountNick;

});
